<template>
  <!-- 车品详情 - 预览界面 -->
	<view class="car-goods-detail">
		<view class="main u-skeleton">
			<view class="wrap u-skeleton-rect">
				<u-swiper :list="detailData.facade_picture" name="img" mode='number' interval='4000' height="700" indicator-pos="bottomRight"></u-swiper>
			</view>
			<view class="boxs heade">
        <!-- 价格 -->
				<view class="h-top flex flex-ai-c flex-jc-sb">
					<view class="h-top-left u-skeleton-rect">
						<text class="font-30 color-EB5C02">￥</text>
						<text style="font-size: 48rpx;font-weight: bold;color: #EB5C02;">{{ detailData.b_price }}</text>
						<text style="margin-left: 22rpx;">价格</text>
						<text style="text-decoration: line-through;">￥{{ detailData.original_price }}</text>
					</view>
					<text class="is-gover" v-if="detailData.storeData.isgoverbool">自营</text>
				</view>
        
        <!-- 车品标题 -->
				<view class="h-mid m-line-text-2 u-skeleton-rect">
          {{ detailData.goods_name }}
					<!-- 邓禄普轮胎 LM705 205/55R16 91V 适配高尔 夫朗逸速腾明锐马自达6 -->
				</view>
        
        <!-- 备注 -->
				<view v-if="!detailData.remark" class="h-bootom m-line-text-2">商家备注：{{ detailData.remark }}</view>
			</view>
			
			<view class="boxs midTwo u-skeleton-rect">
				<view>发货</view>
				<view style="color: #343434;">{{ detailData.send_Region_Name }}</view>
			</view>
			
			<view v-if="status !== 'preview'" class="boxs midTwo">
				<view>数量</view>
				<view class="flex flex-ai-c color-333">
					<text @click="updateSum('-')">-</text>
					<text class="nums">{{ goodsSum }}</text>
					<text @click="updateSum('+')">+</text>
				</view>
			</view>
			
      <!-- 参数 -->
			<view class="canshu params-box boxs flex">
        <view class="canshu-item-left u-skeleton-rect">参数</view>
        
        <view class="data-content u-skeleton-rect">
          <view class="item-right flex flex-jc-sb">
            <view class="color-999">车品分类</view>
            <view class="color-333">{{ detailData.goods_Type_Name }}</view>
          </view>
          <view class="item-right flex flex-jc-sb">
            <view class="color-999">品牌</view>
            <view class="color-333">{{ detailData.name }}</view>
          </view>
          <view class="item-right flex flex-jc-sb">
            <view class="color-999">型号</view>
            <view class="color-333">{{ detailData.type_name }}</view>
          </view>
        </view>
			</view>
			

      <!-- 适配车型列表 -->
			<view class="cartype-list canshu boxs flex">
        <view class="canshu-item-left">适配车型</view>
        
        <!-- 右边车型列表内容 -->
        <view v-if="detailData.carlist" class="carlist-content">
          <!-- 显示3条车型 -->
          <view v-show="!carMoreShow" class="list-box">
            <view v-for="(item, i) in detailData.carlist.slice(0, 3)" :key="item.id" class="item s-line-text">
              {{ item.name }}
            </view>
          </view>
          
          <!-- 显示所有车型 - 点击查看更多 -->
          <view v-show="carMoreShow" class="list-box">
            <view v-for="(item, i) in detailData.carlist" :key="item.id" class="item s-line-text">
              {{ item.name }}
            </view>
          </view>
          
          <!-- 查看更多 -->
          <view v-if="detailData.carlist.length > 3" class="canshu-footer" @click="carMoreShow = !carMoreShow">
            <text class="mr-10">{{ !carMoreShow ? '查看更多' : '点击收起' }}</text>
            <u-icon :name="!carMoreShow ? 'arrow-down':'arrow-up'" size="26rpx" color="#999"></u-icon>
          </view>
        </view>
        
        <view v-else class="carlist-content">
          <view class="list-box">
            <view class="item s-line-text">
              适配所有车型
            </view>
          </view>
        </view>
			</view>
			
      <!-- 店铺 -->
			<view class="store-box boxs canshu">
				<view class="store-info flex">
          <!-- 店铺头像 -->
          <view>
            <image :src="storeHeaderImg" class="img"></image>
          </view>
          
					<view class="info-text">
						<view class="title-name">
							<text>{{ detailData.storeData.store_Name }}</text> 
              <i-icon icon="iconbaozhang" type="single" color="#60C534"></i-icon>
              <i-icon icon="iconbao_1" type="single" color="#FBB000"></i-icon>
						</view>
						<view class="btn-box flex">
							<!-- <view class="btn" @click="collect()"><text>收藏店铺</text></view> -->
							<view class="btn" @click="goStorePage()"><text>进店逛逛</text></view>
						</view>
					</view>
				</view>
				<view class="d-bottom flex flex-jc-sb flex-ai-c">
					<view class="font-26 color-666">所在地：{{ detailData.storeData.address.substr(0, 2) }}</view>
					<view class="font-26 color-666">商品数：{{ detailData.storeData.goodsCount }}</view>
					<view class="font-26 color-666">收藏数：{{ detailData.storeData.collection }}</view>
				</view>
			</view>
		</view>
    
    <!-- 底部按钮部分 -->
    <view v-if="status !== 'preview'" class="btn-footer flex flex-ai-c">
      <i-button bgColor="#333" shape="circleLeft" class="btn">
        <view class="flex flex-dir-c flex-jc-c" @click="callPhone()">
          <i-icon icon="iconlianxi" color="#FFE23E"></i-icon>
          <text class="text font-30">联系卖家</text>
        </view>
      </i-button>
      
      <i-button bgColor="#333" class="btn">
        <view class="flex flex-dir-c flex-jc-c" @click="goBuyCarPage()">
          <i-icon icon="iconwoshimaijia" color="#FFE23E"></i-icon>
          <text class="text font-30">购物车</text>
        </view>
      </i-button>
      
      <view class="btn" @click="$u.throttle(addToBuyCar, 1000)">
        <i-button bgColor="#333" text="加入购物车" color="#FFE23E"></i-button>
      </view>
      <view class="btn" @click="goSubmitOrderPage()">
        <i-button text="立即购买" color="#333" shape="circleRight"></i-button>
      </view>
    </view>
    
    <!-- 骨架屏组件 -->
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
    
    <!-- 添加购物车的动画 -->
    <view class="buycar-ami"></view>
    
    <!-- 分享弹窗选项 -->
    <i-share-popup v-model="sharePopupShow" @change="handleShare"></i-share-popup>
	</view>
</template>

<script src="./carGoodsDetail.js"></script>

<style lang="scss" scoped>
	@import './carGoodsDetail.scss';
</style>

